import React from "react";
import clsx from "clsx";

import SidebarMenu from "./SidebarMenu";
import SidebarFooter from "./SidebarFooter";
import SidebarHeader from "./SidebarHeader";

import { useDispatch, useSelector } from "react-redux";
import { setSidebarToggleMobile } from "../../../stores/themeSlicer";
import { ReduxStoreTypes } from "../../../stores/rootStore";
import { Typography } from "@material-ui/core";

interface SidebarProps {
  sidebarStyle?: string;
  sidebarShadow?: boolean;
  sidebarFooter?: boolean;
  sidebarToggleMobile?: boolean;
  sidebarToggle?: boolean;
}

const Sidebar = (props: SidebarProps) => {
  const dispatch = useDispatch();
  const themeConfig = useSelector(
    (state: ReduxStoreTypes) => state.themeOptions
  );
  const {
    sidebarShadow,
    sidebarFooter,
    sidebarToggleMobile,
    palletType,
  } = themeConfig;
  const toggleSidebarMobile = () => {
    dispatch(setSidebarToggleMobile(!sidebarToggleMobile));
  };
  return (
    <>
      <Typography
        component="span"
        variant="body2"
        className={clsx("app-sidebar", `app-sidebar--${palletType}`, {
          "app-sidebar--shadow": sidebarShadow,
        })}
      >
        <SidebarHeader />
        <div className="app-sidebar--content">
          <SidebarMenu />
        </div>
        {sidebarFooter && <SidebarFooter />}
      </Typography>
      <div
        onClick={toggleSidebarMobile}
        className={clsx("app-sidebar-overlay", {
          "is-active": sidebarToggleMobile,
        })}
      />
    </>
  );
};

export default Sidebar;
